<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{})">
</head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <fieldset class="layui-elem-field">
        <legend>数据统计</legend>
        <div class="layui-field-box">
            <div id="main" style="width: 1000px;height:400px;"></div>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field">
        <legend>系统信息</legend>
        <div class="layui-field-box">
            <table class="layui-table">
                <tbody>
                <tr>
                    <th>xxx版本</th>
                    <td>1.0.180420</td>
                </tr>
                <tr>
                    <th>服务器地址</th>
                    <td>x.xuebingsi.com</td>
                </tr>
                <tr>
                    <th>操作系统</th>
                    <td>WINNT</td>
                </tr>
                <tr>
                    <th>运行环境</th>
                    <td>Apache/2.4.23 (Win32) OpenSSL/1.0.2j mod_fcgid/2.3.9</td>
                </tr>
                <tr>
                    <th>PHP版本</th>
                    <td>5.6.27</td>
                </tr>
                <tr>
                    <th>PHP运行方式</th>
                    <td>cgi-fcgi</td>
                </tr>
                <tr>
                    <th>MYSQL版本</th>
                    <td>5.5.53</td>
                </tr>
                <tr>
                    <th>ThinkPHP</th>
                    <td>5.0.18</td>
                </tr>
                <tr>
                    <th>上传附件限制</th>
                    <td>2M</td>
                </tr>
                <tr>
                    <th>执行时间限制</th>
                    <td>30s</td>
                </tr>
                <tr>
                    <th>剩余空间</th>
                    <td>86015.2M</td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
</div>
<script>
    $(document).ready(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
        var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type: 'post',
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: ctxPath + '/externalAssembly/echarts/systemLog',    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result.code==0) {
                    for (var i = 0; i < result.data.length; i++) {
                        names.push(result.data[i].name);
                        values.push(result.data[i].value);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        tooltip: {},
                        legend: {
                            data: ['访问数']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '访问数',//薪资 series not exists. Legend data should be same with series name or data name.
                            type: 'line',
                            data: values
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
</script>
</body>
</html>